<template>
    <el-row>
        <el-col :span="12" class="white-block">
            <h3>普通的表格</h3>
            <table-example :data="tableData" :tableColumn="header" class="mt20">
            </table-example>
            <h3 class="mt20">自定义列内容的表格</h3>
            <table-example :data="tableData" :tableColumn="header" :slotColumns="slotColumns" class="mt20">
                <!--接受scope-->
                <template slot="date" slot-scope="scope">
                    <span>自定义数据 -- {{scope.row.province}}</span>
                    <!--<span>{{scope.row.date}}</span>-->
                </template>
            </table-example>
            <h3 class="mt20">不显示表头的表格</h3>
            <table-example :data="tableData" :tableColumn="header" :showHeader="false" class="mt20">
            </table-example>
            <h3 class="mt20">显示斑马纹的表格</h3>
            <table-example :data="tableData" :tableColumn="header" :stripe="true" class="mt20">
            </table-example>
            <h3 class="mt20">显示反色斑马纹的表格</h3>
            <table-example :data="tableData" :tableColumn="header" :stripe="true" :stripeInverse="true" class="mt20">
            </table-example>
            <h3 class="mt20">带边框的表格</h3>
            <table-example :data="tableData" :tableColumn="header" :border="true" class="mt20">
            </table-example>
            <h3 class="mt20">带勾选框的表格</h3>
            <p>selection无具体参数时可传true，有参数时传json</p>
            <table-example :data="tableData" :tableColumn="header" :selection="selection" class="mt20"
                           @selectionChange="selectionChange">
            </table-example>
            <table-example :data="tableData" :tableColumn="header" :selection="true" class="mt20"
                           @selectionChange="selectionChange">
            </table-example>
        </el-col>
        <el-col :span="11" :offset="1" class="white-block">
            <h3 class="mt20">表格 参数</h3>
            <table-example :data="tableData1" :tableColumn="header1" class="mt20"></table-example>
            <h3 class="mt20">表格-行 参数</h3>
            <table-example :data="tableData2" :tableColumn="header1" class="mt20"></table-example>
        </el-col>
    </el-row>

</template>

<script>
    import tableExample from '../../components/table'

    export default {
        name: '',
        data() {
            return {
                tableData: [
                    {
                        date: '2016-05-03',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    },
                    {
                        date: '2016-05-03',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333
                    },
                    {
                        date: '2016-05-03',
                        name: '王小虎',
                        province: '上海',
                        city: '普陀区',
                        address: '上海市普陀区金沙江路 1518 弄',
                        zip: 200333,
                        disabled: true
                    }
                ],
                header: [
                    {
                        prop: 'date',
                        label: '日期',
                        minWidth: '20%',
                        align: 'center',
                        headerAlign: 'left'
                    },
                    {
                        prop: 'name',
                        label: '姓名',
                        width: '100',
                        align: 'left',
                        headerAlign: 'center'
                    },
                    {
                        prop: 'address',
                        label: '地址'
                    }
                ],
                header1: [
                    {
                        prop: 'name',
                        label: '参数名'
                    },
                    {
                        prop: 'usage',
                        label: '参数用法'
                    },
                    {
                        prop: 'info',
                        label: '参数说明'
                    },
                    {
                        prop: 'choice',
                        label: '可选值'
                    },
                    {
                        prop: 'default',
                        label: '默认值'
                    }
                ],
                tableData1: [],
                tableData2: [],
                slotColumns: ['date'],
                selection: {
                    width: '100',
                    align: 'center',
                    headerAlign: 'center'
                }
            }
        },
        mounted() {
            let tableData1 = [
                    {
                        name: 'data',
                        usage: ':data',
                        info: '表格数据（不含表头）',
                        choice: '-',
                        default: '-'
                    },
                    {
                        name: 'tableColumn',
                        usage: '-',
                        info: '表头数据',
                        choice: '-',
                        default: '-'
                    },
                    {
                        name: 'slotColumns',
                        usage: '-',
                        info: '需要自定义列集 []',
                        choice: '-',
                        default: '-'
                    },
                    {
                        name: 'showHeader',
                        usage: ':show-header',
                        info: '是否显示表头',
                        choice: 'true/false',
                        default: 'true'
                    },
                    {
                        name: 'stripe',
                        usage: ':stripe',
                        info: '是否显示斑马纹（双数显示颜色）',
                        choice: 'true/false',
                        default: 'false'
                    },
                    {
                        name: 'stripeInverse',
                        usage: '-',
                        info: '是否显示反色斑马纹（单数显示颜色）',
                        choice: 'true/false',
                        default: 'false'
                    },
                    {
                        name: 'border',
                        usage: ':border',
                        info: '是否显示边框',
                        choice: 'true/false',
                        default: 'false'
                    }
                ],
                tableData2 = [
                    {
                        name: 'prop',
                        usage: ':prop',
                        info: '字段名',
                        choice: '-',
                        default: '-'
                    },
                    {
                        name: 'label',
                        usage: ':label',
                        info: '标题',
                        choice: '-',
                        default: '-'
                    },
                    {
                        name: 'minWidth',
                        usage: ':min-width',
                        info: '最小宽度（可使用百分比）',
                        choice: '-',
                        default: '-'
                    },
                    {
                        name: 'width',
                        usage: ':width',
                        info: '宽度（不可使用百分比）',
                        choice: '-',
                        default: '-'
                    },
                    {
                        name: 'align',
                        usage: ':align',
                        info: '对齐方式',
                        choice: 'left/center/right',
                        default: 'left'
                    },
                    {
                        name: 'headerAlign',
                        usage: ':header-align',
                        info: '表头对齐方式，若不设置该项，则使用表格的对齐方式',
                        choice: 'left/center/right',
                        default: '-'
                    }
                ]
            this.tableData1 = tableData1
            this.tableData2 = tableData2
        },
        methods: {
            selectionChange(val) {
                // val: 实时当前被选中行
            }
        },
        components: {
            tableExample
        }
    }
</script>

<style scoped lang="less">

</style>
